<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/output.css">
</head>

<body>

    <div class="max-w-md mx-auto bg-whiter">
        <h2 class="text-center text-2xl font-bold">Alert Simple</h2>
        <div class="space-y-4">
            <div class="rounded-md bg-primary-50 p-4 text-sm text-primary-500">
                <b>Info alert</b>
                Lorem ipsum dolor sitamet. Internos reprehenderit perspiciatis commodi et omnis impedit.
            </div>
            <div class="rounded-md bg-green-50 p-4 text-sm text-green-500"><b>Success alert</b> Lorem ipsum dolor sit
                amet. Internos reprehenderit perspiciatis commodi et omnis impedit.</div>
            <div class="rounded-md bg-yellow-50 p-4 text-sm text-yellow-500"><b>Warning alert</b> Lorem ipsum dolor sit
                amet. Internos reprehenderit perspiciatis commodi et omnis impedit.</div>
            <div class="rounded-md bg-red-50 p-4 text-sm text-red-500"><b>Error alert</b> Lorem ipsum dolor sit amet.
                Internos reprehenderit perspiciatis commodi et omnis impedit.</div>
        </div>


    </div>

</body>

</html>